import React, { Component } from 'react'
import {Link,Route} from "react-router-dom"

import Detail from "./Detail"

export default class Message extends Component {
    state = {
        navList: [
            { id: 1, message: "消息1" },
            { id: 2, message: "消息2" },
            { id: 3, message: "消息3" }
        ]
    }
    render() {
        const { navList } = this.state
        return (
            <div>

                <ul>
                    {
                        navList.map(item => {
                            return <li key={item.id}>
                                {/* 传递params参数 */}
                                {/* <Link to={`/home/message/detail/${item.id}`}>{item.message}</Link> */}
                                {/* 传递search参数 */}
                                <Link to={`/home/message/detail/?id=${item.id}`}>{item.message}</Link>
                            </li>
                        })
                    }
                </ul>
                <hr/>
                {/* search参数无需声明接收，正常注册组件即可 */}
                <Route path="/home/message/detail" component={Detail} />
                {/* <Detail {...this.state.navList} /> */}
            </div>
        )
    }
}
